import React from 'react';
import styles from './index.less';
import Title from '../Title';
import { Row, Col, Slider } from 'antd';

export default function(props) {
  return (
    <div className={styles.root}>
      <Title
        text={'设备告警'}
        icon={require('../../img/icon5.png')}
        type={true}
      />
      <div className={styles.boxs}>
        <div className={styles.row} style={{ marginBottom: '15px' }}>
          <div
            className={styles.item}
            style={{ backgroundImage: `url(${require('./img/icon3.png')})` }}
          >
            <img src={require('./img/icon1.png')} className={styles.icon} />
            <div className={styles.title}>今日告警</div>
            <div className={styles.text}>50</div>
          </div>

          <div className={styles.item}>
            <img src={require('./img/icon2.png')} className={styles.icon} />
            <div className={styles.title}>今日消警</div>
            <div className={styles.text}>50</div>
          </div>

          <div className={styles.item}>
            <img src={require('./img/icon2.png')} className={styles.icon} />
            <div className={styles.title}>今日消警率</div>
            <div className={styles.text}>50%</div>
          </div>
        </div>

        <div className={styles.row}>
          <div className={styles.item}>
            <img src={require('./img/icon2.png')} className={styles.icon} />
            <div className={styles.title}>累计告警(次)</div>
            <div className={styles.text}>3000</div>
          </div>

          <div className={styles.item}>
            <img src={require('./img/icon2.png')} className={styles.icon} />
            <div className={styles.title}>累计消警(次)</div>
            <div className={styles.text}>2000</div>
          </div>

          <div className={styles.item}>
            <img src={require('./img/icon2.png')} className={styles.icon} />
            <div className={styles.title}>累计消警率</div>
            <div className={styles.text}>80%</div>
          </div>
        </div>
      </div>
    </div>
  );
}
